<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>动态管理 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f7fa;
      color: #333;
      min-height: 100vh;
      margin: 0;
    }
    
    /* 顶部导航 */
    .top-nav {
      height: 50px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      padding: 0 15px;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0 auto;
    }
    
    .nav-btn {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      text-decoration: none;
    }
    
    .nav-btn.primary {
      color: #3b82f6;
    }
    
    /* 动态概览 */
    .feed-overview {
      background-color: #fff;
      padding: 15px;
      margin-bottom: 10px;
    }
    
    .overview-stats {
      display: flex;
      justify-content: space-between;
    }
    
    .stat-item {
      text-align: center;
      flex: 1;
    }
    
    .stat-value {
      font-size: 18px;
      font-weight: 700;
    }
    
    .stat-label {
      font-size: 12px;
      color: #999;
    }
    
    /* 样式切换器 */
    .style-switcher {
      background-color: #fff;
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
    }
    
    .style-tabs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 5px;
    }
    
    .style-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .style-tab {
      padding: 6px 14px;
      background-color: #f5f7fa;
      border-radius: 20px;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
    }
    
    .style-tab.active {
      background-color: #3b82f6;
      color: white;
    }
    
    /* 通用动态页面样式 */
    .feed-page {
      display: none;
    }
    
    .feed-page.active {
      display: block;
    }
    
    /* 筛选栏 */
    .filter-bar {
      display: flex;
      padding: 10px 15px;
      background-color: white;
      border-bottom: 1px solid #eee;
      gap: 10px;
    }
    
    .filter-item {
      flex: 1;
      padding: 6px 0;
      text-align: center;
      font-size: 14px;
      position: relative;
    }
    
    .filter-item::after {
      content: "\f078";
      font-family: "FontAwesome";
      font-size: 12px;
      margin-left: 5px;
      color: #999;
    }
    
    /* 内容类型标签 */
    .type-tag {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 500;
    }
    
    .type-post {
      background-color: #ecfdf5;
      color: #10b981;
    }
    
    .type-photo {
      background-color: #dbeafe;
      color: #3b82f6;
    }
    
    .type-video {
      background-color: #fce7f3;
      color: #db2777;
    }
    
    .type-link {
      background-color: #fff3cd;
      color: #d97706;
    }
    
    /* 操作按钮 */
    .action-btn {
      background: none;
      border: none;
      color: #666;
      font-size: 14px;
      padding: 4px 8px;
      border-radius: 4px;
      cursor: pointer;
    }
    
    .action-btn:hover {
      background-color: #f5f7fa;
    }
    
    .action-btn.edit {
      color: #3b82f6;
    }
    
    .action-btn.delete {
      color: #ef4444;
    }
    
    .action-btn.hide {
      color: #6b7280;
    }
    
    /* 用户信息样式 */
    .user-info {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
    
    .user-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 10px;
    }
    
    .user-name {
      font-weight: 500;
      font-size: 15px;
      margin: 0;
    }
    
    .post-time {
      font-size: 12px;
      color: #999;
    }
    
    /* 样式1 - 标准卡片视图 */
    .standard-feed {
      padding: 10px 15px;
    }
    
    .standard-card {
      background-color: white;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .post-content {
      font-size: 15px;
      line-height: 1.5;
      margin-bottom: 12px;
    }
    
    .post-media {
      width: 100%;
      border-radius: 8px;
      margin-bottom: 12px;
    }
    
    .post-actions {
      display: flex;
      justify-content: space-around;
      padding-top: 8px;
      border-top: 1px solid #f5f7fa;
    }
    
    .post-action {
      display: flex;
      align-items: center;
      gap: 5px;
      color: #666;
      font-size: 14px;
    }
    
    /* 样式2 - 紧凑网格视图 */
    .compact-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      padding: 10px 15px;
    }
    
    .compact-card {
      background-color: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 5px rgba(0,0,0,0.03);
      position: relative;
    }
    
    .compact-media {
      width: 100%;
      aspect-ratio: 1/1;
      object-fit: cover;
    }
    
    .compact-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(transparent, rgba(0,0,0,0.6));
      padding: 10px;
      color: white;
    }
    
    .compact-text {
      font-size: 13px;
      margin: 0 0 5px 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .compact-stats {
      display: flex;
      gap: 10px;
      font-size: 11px;
    }
    
    .compact-stat {
      display: flex;
      align-items: center;
      gap: 3px;
    }
    
    /* 样式3 - 互动优先视图 */
    .engagement-feed {
      padding: 0;
      margin: 0;
      list-style: none;
    }
    
    .engagement-item {
      background-color: white;
      padding: 15px;
      border-bottom: 1px solid #eee;
    }
    
    .engagement-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 10px;
    }
    
    .engagement-content {
      font-size: 14px;
      margin-bottom: 10px;
    }
    
    .engagement-stats {
      display: flex;
      gap: 15px;
      font-size: 13px;
      color: #666;
      margin-bottom: 10px;
    }
    
    .engagement-stats .highlight {
      color: #3b82f6;
      font-weight: 500;
    }
    
    .engagement-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }
    
    /* 样式4 - 分类分组视图 */
    .category-group {
      margin-bottom: 15px;
    }
    
    .category-header {
      padding: 10px 15px;
      font-size: 14px;
      font-weight: 500;
      color: #666;
      background-color: #f5f7fa;
      display: flex;
      justify-content: space-between;
    }
    
    .category-count {
      background-color: #e5e7eb;
      color: #6b7280;
      font-size: 12px;
      padding: 1px 6px;
      border-radius: 10px;
    }
    
    .category-content {
      background-color: white;
    }
    
    .category-item {
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
      display: flex;
      gap: 12px;
    }
    
    .category-media {
      width: 70px;
      height: 70px;
      border-radius: 8px;
      object-fit: cover;
      flex-shrink: 0;
    }
    
    .category-info {
      flex: 1;
    }
    
    .category-text {
      font-size: 14px;
      margin: 0 0 5px 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .category-meta {
      font-size: 12px;
      color: #999;
      display: flex;
      justify-content: space-between;
    }
    
    /* 新建按钮 */
    .create-btn {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background-color: #3b82f6;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
      text-decoration: none;
      z-index: 90;
    }
    
    /* 空状态 */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      text-align: center;
    }
    
    .empty-icon {
      font-size: 60px;
      margin-bottom: 20px;
      color: #cbd5e1;
    }
    
    .empty-text {
      font-size: 16px;
      margin: 0 0 10px 0;
    }
    
    .empty-subtext {
      font-size: 14px;
      color: #94a3b8;
      margin: 0 0 20px 0;
    }
    
    .empty-btn {
      padding: 8px 16px;
      background-color: #3b82f6;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      cursor: pointer;
    }
    
    /* 提示框 */
    .toast {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0,0,0,0.8);
      color: white;
      border-radius: 8px;
      padding: 10px 15px;
      font-size: 14px;
      z-index: 1000;
      display: none;
    }
  </style>
</head>
<body>
  <!-- 提示框 -->
  <div class="toast" id="toast"></div>
  
  <!-- 新建动态按钮 -->
  <a href="#" class="create-btn" id="createBtn">
    <i class="fa fa-plus"></i>
  </a>
  
  <!-- 顶部导航 -->
  <nav class="top-nav">
    <a href="#" class="nav-btn" id="backBtn">
      <i class="fa fa-angle-left"></i>
    </a>
    <h1 class="nav-title">动态管理</h1>
    <a href="#" class="nav-btn primary" id="searchBtn">
      <i class="fa fa-search"></i>
    </a>
  </nav>
  
  <!-- 动态概览 -->
  <div class="feed-overview">
    <div class="overview-stats">
      <div class="stat-item">
        <div class="stat-value">42</div>
        <div class="stat-label">帖子</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">18</div>
        <div class="stat-label">图片</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">7</div>
        <div class="stat-label">视频</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">5.2k</div>
        <div class="stat-label">总互动</div>
      </div>
    </div>
  </div>
  
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="style-tabs">
      <div class="style-tab active" data-style="standard">标准卡片</div>
      <div class="style-tab" data-style="compact">紧凑网格</div>
      <div class="style-tab" data-style="engagement">互动优先</div>
      <div class="style-tab" data-style="category">分类分组</div>
    </div>
  </div>
  
  <!-- 筛选栏 -->
  <div class="filter-bar">
    <div class="filter-item">全部类型</div>
    <div class="filter-item">最近发布</div>
    <div class="filter-item">互动最高</div>
  </div>
  
  <!-- 样式1 - 标准卡片视图 -->
  <div class="feed-page active" id="standard">
    <div class="standard-feed">
      <div class="standard-card">
        <div class="user-info">
          <img src="https://picsum.photos/seed/user1/100/100" alt="用户头像" class="user-avatar">
          <div>
            <p class="user-name">张开发</p>
            <div class="post-time">今天 14:32</div>
          </div>
        </div>
        <div class="post-content">
          刚刚发布了新的前端教程，讲解React Hooks的高级用法，包含多个实用案例和性能优化技巧，欢迎大家阅读并提出宝贵意见！
        </div>
        <img src="https://picsum.photos/seed/post1/600/400" alt="帖子图片" class="post-media">
        <div class="post-actions">
          <div class="post-action">
            <i class="fa fa-heart-o"></i>
            <span>128</span>
          </div>
          <div class="post-action">
            <i class="fa fa-comment-o"></i>
            <span>36</span>
          </div>
          <div class="post-action">
            <i class="fa fa-share-alt"></i>
            <span>15</span>
          </div>
          <div class="post-action">
            <i class="fa fa-ellipsis-h"></i>
          </div>
        </div>
      </div>
      
      <div class="standard-card">
        <div class="user-info">
          <img src="https://picsum.photos/seed/user2/100/100" alt="用户头像" class="user-avatar">
          <div>
            <p class="user-name">李设计</p>
            <div class="post-time">昨天 09:15</div>
          </div>
        </div>
        <div class="post-content">
          分享一组最新的UI设计趋势，包含渐变色应用、微交互设计和暗黑模式实现方案，希望能给大家带来灵感！
        </div>
        <div class="post-actions">
          <div class="post-action">
            <i class="fa fa-heart-o"></i>
            <span>95</span>
          </div>
          <div class="post-action">
            <i class="fa fa-comment-o"></i>
            <span>24</span>
          </div>
          <div class="post-action">
            <i class="fa fa-share-alt"></i>
            <span>8</span>
          </div>
          <div class="post-action">
            <i class="fa fa-ellipsis-h"></i>
          </div>
        </div>
      </div>
      
      <div class="standard-card">
        <div class="user-info">
          <img src="https://picsum.photos/seed/user3/100/100" alt="用户头像" class="user-avatar">
          <div>
            <p class="user-name">王产品</p>
            <div class="post-time">3天前</div>
          </div>
        </div>
        <div class="post-content">
          新产品上线啦！经过3个月的努力，我们的社交分析工具终于发布了，支持多平台数据整合和用户行为分析，欢迎体验！
        </div>
        <img src="https://picsum.photos/seed/post2/600/400" alt="帖子图片" class="post-media">
        <div class="post-actions">
          <div class="post-action">
            <i class="fa fa-heart-o"></i>
            <span>217</span>
          </div>
          <div class="post-action">
            <i class="fa fa-comment-o"></i>
            <span>53</span>
          </div>
          <div class="post-action">
            <i class="fa fa-share-alt"></i>
            <span>42</span>
          </div>
          <div class="post-action">
            <i class="fa fa-ellipsis-h"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 样式2 - 紧凑网格视图 -->
  <div class="feed-page" id="compact">
    <div class="compact-grid">
      <div class="compact-card">
        <img src="https://picsum.photos/seed/media1/300/300" alt="动态图片" class="compact-media">
        <div class="compact-overlay">
          <p class="compact-text">前端开发最新趋势分析</p>
          <div class="compact-stats">
            <div class="compact-stat"><i class="fa fa-heart-o"></i> 128</div>
            <div class="compact-stat"><i class="fa fa-comment-o"></i> 36</div>
          </div>
        </div>
      </div>
      
      <div class="compact-card">
        <img src="https://picsum.photos/seed/media2/300/300" alt="动态图片" class="compact-media">
        <div class="compact-overlay">
          <p class="compact-text">UI设计趋势分享</p>
          <div class="compact-stats">
            <div class="compact-stat"><i class="fa fa-heart-o"></i> 95</div>
            <div class="compact-stat"><i class="fa fa-comment-o"></i> 24</div>
          </div>
        </div>
      </div>
      
      <div class="compact-card">
        <img src="https://picsum.photos/seed/media3/300/300" alt="动态图片" class="compact-media">
        <div class="compact-overlay">
          <p class="compact-text">新产品上线公告</p>
          <div class="compact-stats">
            <div class="compact-stat"><i class="fa fa-heart-o"></i> 217</div>
            <div class="compact-stat"><i class="fa fa-comment-o"></i> 53</div>
          </div>
        </div>
      </div>
      
      <div class="compact-card">
        <img src="https://picsum.photos/seed/media4/300/300" alt="动态图片" class="compact-media">
        <div class="compact-overlay">
          <p class="compact-text">JavaScript性能优化技巧</p>
          <div class="compact-stats">
            <div class="compact-stat"><i class="fa fa-heart-o"></i> 156</div>
            <div class="compact-stat"><i class="fa fa-comment-o"></i> 42</div>
          </div>
        </div>
      </div>
      
      <div class="compact-card">
        <img src="https://picsum.photos/seed/media5/300/300" alt="动态图片" class="compact-media">
        <div class="compact-overlay">
          <p class="compact-text">产品设计思考：如何提升用户留存</p>
          <div class="compact-stats">
            <div class="compact-stat"><i class="fa fa-heart-o"></i> 89</div>
            <div class="compact-stat"><i class="fa fa-comment-o"></i> 31</div>
          </div>
        </div>
      </div>
      
      <div class="compact-card">
        <img src="https://picsum.photos/seed/media6/300/300" alt="动态图片" class="compact-media">
        <div class="compact-overlay">
          <p class="compact-text">团队建设活动照片分享</p>
          <div class="compact-stats">
            <div class="compact-stat"><i class="fa fa-heart-o"></i> 203</div>
            <div class="compact-stat"><i class="fa fa-comment-o"></i> 17</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 样式3 - 互动优先视图 -->
  <div class="feed-page" id="engagement">
    <ul class="engagement-feed">
      <li class="engagement-item">
        <div class="engagement-header">
          <div class="user-info">
            <img src="https://picsum.photos/seed/user3/100/100" alt="用户头像" class="user-avatar">
            <div>
              <p class="user-name">王产品</p>
              <div class="post-time">3天前</div>
            </div>
          </div>
          <div class="engagement-actions">
            <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
            <button class="action-btn delete"><i class="fa fa-trash"></i></button>
          </div>
        </div>
        <div class="engagement-content">
          新产品上线啦！经过3个月的努力，我们的社交分析工具终于发布了...
        </div>
        <div class="engagement-stats">
          <span class="highlight"><i class="fa fa-heart"></i> 217</span>
          <span><i class="fa fa-comment"></i> 53</span>
          <span><i class="fa fa-share-alt"></i> 42</span>
          <span><i class="fa fa-eye"></i> 1.2k</span>
        </div>
        <span class="type-tag type-post">帖子</span>
      </li>
      
      <li class="engagement-item">
        <div class="engagement-header">
          <div class="user-info">
            <img src="https://picsum.photos/seed/user6/100/100" alt="用户头像" class="user-avatar">
            <div>
              <p class="user-name">赵摄影</p>
              <div class="post-time">4天前</div>
            </div>
          </div>
          <div class="engagement-actions">
            <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
            <button class="action-btn delete"><i class="fa fa-trash"></i></button>
          </div>
        </div>
        <div class="engagement-content">
          团队建设活动照片分享，感谢大家的参与，期待下一次活动！
        </div>
        <div class="engagement-stats">
          <span class="highlight"><i class="fa fa-heart"></i> 203</span>
          <span><i class="fa fa-comment"></i> 17</span>
          <span><i class="fa fa-share-alt"></i> 9</span>
          <span><i class="fa fa-eye"></i> 856</span>
        </div>
        <span class="type-tag type-photo">图片</span>
      </li>
      
      <li class="engagement-item">
        <div class="engagement-header">
          <div class="user-info">
            <img src="https://picsum.photos/seed/user1/100/100" alt="用户头像" class="user-avatar">
            <div>
              <p class="user-name">张开发</p>
              <div class="post-time">今天 14:32</div>
            </div>
          </div>
          <div class="engagement-actions">
            <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
            <button class="action-btn delete"><i class="fa fa-trash"></i></button>
          </div>
        </div>
        <div class="engagement-content">
          刚刚发布了新的前端教程，讲解React Hooks的高级用法...
        </div>
        <div class="engagement-stats">
          <span class="highlight"><i class="fa fa-heart"></i> 128</span>
          <span><i class="fa fa-comment"></i> 36</span>
          <span><i class="fa fa-share-alt"></i> 15</span>
          <span><i class="fa fa-eye"></i> 642</span>
        </div>
        <span class="type-tag type-link">链接</span>
      </li>
    </ul>
  </div>
  
  <!-- 样式4 - 分类分组视图 -->
  <div class="feed-page" id="category">
    <!-- 帖子分组 -->
    <div class="category-group">
      <div class="category-header">
        <span>帖子</span>
        <span class="category-count">42</span>
      </div>
      <div class="category-content">
        <div class="category-item">
          <div class="category-info">
            <p class="category-text">新产品上线啦！经过3个月的努力，我们的社交分析工具终于发布了</p>
            <div class="category-meta">
              <span>王产品 · 3天前</span>
              <span><i class="fa fa-heart-o"></i> 217</span>
            </div>
          </div>
          <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
        </div>
        
        <div class="category-item">
          <div class="category-info">
            <p class="category-text">分享一组最新的UI设计趋势，包含渐变色应用、微交互设计和暗黑模式实现方案</p>
            <div class="category-meta">
              <span>李设计 · 昨天</span>
              <span><i class="fa fa-heart-o"></i> 95</span>
            </div>
          </div>
          <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
        </div>
      </div>
    </div>
    
    <!-- 图片分组 -->
    <div class="category-group">
      <div class="category-header">
        <span>图片</span>
        <span class="category-count">18</span>
      </div>
      <div class="category-content">
        <div class="category-item">
          <img src="https://picsum.photos/seed/media6/300/300" alt="动态图片" class="category-media">
          <div class="category-info">
            <p class="category-text">团队建设活动照片分享</p>
            <div class="category-meta">
              <span>赵摄影 · 4天前</span>
              <span><i class="fa fa-heart-o"></i> 203</span>
            </div>
          </div>
          <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
        </div>
        
        <div class="category-item">
          <img src="https://picsum.photos/seed/media7/300/300" alt="动态图片" class="category-media">
          <div class="category-info">
            <p class="category-text">办公室新环境布置完成，欢迎参观</p>
            <div class="category-meta">
              <span>孙行政 · 1周前</span>
              <span><i class="fa fa-heart-o"></i> 142</span>
            </div>
          </div>
          <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
        </div>
      </div>
    </div>
    
    <!-- 视频分组 -->
    <div class="category-group">
      <div class="category-header">
        <span>视频</span>
        <span class="category-count">7</span>
      </div>
      <div class="category-content">
        <div class="category-item">
          <img src="https://picsum.photos/seed/video1/300/300" alt="视频封面" class="category-media">
          <div class="category-info">
            <p class="category-text">产品演示视频：社交分析工具功能介绍</p>
            <div class="category-meta">
              <span>王产品 · 5天前</span>
              <span><i class="fa fa-heart-o"></i> 189</span>
            </div>
          </div>
          <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 空状态示例 (默认隐藏) -->
  <div class="empty-state" style="display: none;">
    <div class="empty-icon">
      <i class="fa fa-newspaper-o"></i>
    </div>
    <h3 class="empty-text">暂无动态</h3>
    <p class="empty-subtext">您还没有发布任何动态，开始分享第一条吧</p>
    <button class="empty-btn">发布动态</button>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 获取元素
    const styleTabs = document.querySelectorAll('.style-tab');
    const feedPages = document.querySelectorAll('.feed-page');
    const filterItems = document.querySelectorAll('.filter-item');
    const actionBtns = document.querySelectorAll('.action-btn');
    const backBtn = document.getElementById('backBtn');
    const searchBtn = document.getElementById('searchBtn');
    const createBtn = document.getElementById('createBtn');
    const toast = document.getElementById('toast');
    
    // 样式切换
    styleTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        // 移除所有激活状态
        styleTabs.forEach(t => t.classList.remove('active'));
        feedPages.forEach(page => page.classList.remove('active'));
        
        // 设置当前激活状态
        this.classList.add('active');
        const style = this.getAttribute('data-style');
        document.getElementById(style).classList.add('active');
        
        showToast(`已切换到${this.textContent}`);
      });
    });
    
    // 筛选项点击事件
    filterItems.forEach(item => {
      item.addEventListener('click', function() {
        showToast(`筛选：${this.textContent}`);
        // 实际应用中可打开筛选弹窗
      });
    });
    
    // 操作按钮点击事件
    actionBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        let action;
        if (this.classList.contains('edit')) action = '编辑';
        else if (this.classList.contains('delete')) action = '删除';
        else if (this.classList.contains('hide')) action = '隐藏';
        
        const textElement = this.closest('.standard-card, .engagement-item, .category-item')
          .querySelector('.post-content, .engagement-content, .category-text');
        const text = textElement.textContent.length > 20 
          ? textElement.textContent.substring(0, 20) + '...' 
          : textElement.textContent;
        
        if (action === '删除') {
          if (confirm(`确定要删除 "${text}" 吗？`)) {
            showToast(`已${action}动态`);
          }
        } else {
          showToast(`正在${action}动态`);
        }
      });
    });
    
    // 返回按钮点击事件
    backBtn.addEventListener('click', function() {
      showToast('返回上一页');
      // 实际应用中可以使用history.back()
    });
    
    // 搜索按钮点击事件
    searchBtn.addEventListener('click', function() {
      showToast('搜索动态');
    });
    
    // 新建按钮点击事件
    createBtn.addEventListener('click', function() {
      showToast('发布新动态');
    });
    
    // 显示提示
    function showToast(message) {
      toast.textContent = message;
      toast.style.display = 'block';
      
      setTimeout(() => {
        toast.style.display = 'none';
      }, 2000);
    }
  </script>
</body>
</html>
